<template>
  <div class="father">
<!--    <h1>问卷猩</h1>-->
    <h3 class="hh">代码不规范，组长两行泪:</h3>
    <div class="container">
      <div class="scrolling-text">{{scrollText}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHead",
  data(){
    return{
      scrollText:'1.代码中不要出现莫名其妙的数字；2.避免深度嵌套；3.标记注释；4.避免创建大函数；5.尽量避免重复代码；' +
          '6.变量命名规范；7.函数命名规范；8.命名时注意动词的使用；9. 常量值所有都大写；10. 避免变量使用字母。',
    }
  }
}
</script>

<style scoped>
.father{
  display: flex;
  /*background-color: hotpink;*/
  line-height: normal;
}
/* 容器样式 */
.container {
  width: 800px;
  height: 50px;
  overflow: hidden;
  position: relative;
  /*margin-left: 100px;*/
  /*line-height: normal;*/
  /*display: flex;*/
  margin-top: 20px;
}

.hh{
  position: relative;
  margin-left: 20px;
}
/* 滚动文本元素样式 */
.scrolling-text {
  position: absolute;
  white-space: nowrap;
  animation: scroll-right 30s linear infinite;
  display: inline-block;
  /*display: flex;*/
  top: 0;
  left: 0;
  color: orangered;
}

/* 复制的滚动文本元素样式 */
.scrolling-text:nth-child(2) {
  animation-delay: 5s;
}

.scrolling-text:nth-child(3) {
  animation-delay: 10s;
}

/* 滚动动画规则 */
@keyframes scroll-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
